<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1、左边 width:200px; float: left; 右边margin-left:200px; width: auto;
        2、左边 width:200px; float: left; 右边overflow: hidden; 这样右边就触发了 BFC，BFC的区域不会与浮动元素发⽣重叠，所以两侧就不会发⽣重叠
        3、最外层 display:flex; 左边 width:200px; 右边 flex: 1;
    -->
    <div class="outer">
        <div class="left">123</div>
        <div class="right">456</div>
    </div>
</body>
<style>
.outer {
height: 100px;
}
/* 
---1
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold
} */

/* .left{---2
width: 100px;
height: 200px;
background: red;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
} */

.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
</style>
</html>